<template>
  <div class="UnionSettlement">
    <div class="searchBox">
      <!-- <span class="margin"></span> -->
      <span class="txt">工会编号</span>
      <el-input v-model="id" clearable placeholder="请输入工会编号"></el-input>
      <span class="margin"></span>
      <span class="txt">工会名称</span>
      <el-input
        v-model="name"
        clearable
        placeholder="请输入工会名称"
      ></el-input>
      <span class="margin"></span>
      <span class="txt">结算方式</span>
      <el-select v-model="type" placeholder="请选择">
        <el-option label="不限" value=""> </el-option>
        <el-option label="日结" value="1"> </el-option>
        <el-option label="月结" value="2"> </el-option>
      </el-select>
      <span class="margin"></span>
      <span class="txt">状态</span>
      <el-select v-model="status" placeholder="请选择">
        <el-option label="不限" value=""> </el-option>
        <el-option label="新增账单" value="1"> </el-option>
        <el-option label="等待工会确认" value="2"> </el-option>
        <el-option label="工会已确认" value="3"> </el-option>
        <el-option label="已打款账单" value="4"> </el-option>
        <el-option label="工会回执账单" value="5"> </el-option>
      </el-select>
      <span class="margin"></span>
      <el-button class="btn" @click="search">搜索</el-button>
    </div>

    <el-card>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%; margin-top: 10px"
        :header-cell-style="{ background: '#f5f7fa' }"
        @selection-change="handleSelectionChange"
      >
        <template slot="empty">
          <el-empty :image-size="200"></el-empty>
        </template>
        <el-table-column type="selection" label="全选" width="55">
        </el-table-column>
        <el-table-column prop="create_time" label="订单生成时间">
        </el-table-column>
        <el-table-column prop="create_time" label="工会编号"> </el-table-column>
        <el-table-column prop="create_time" label="工会名称"> </el-table-column>
        <el-table-column prop="create_time" label="结算起始日期">
        </el-table-column>
        <el-table-column prop="create_time" label="结算终止日期">
        </el-table-column>
        <el-table-column prop="create_time" label="结算方式"> </el-table-column>
        <el-table-column prop="create_time" label="分成比例"> </el-table-column>
        <el-table-column prop="create_time" label="结算税率"> </el-table-column>
        <el-table-column prop="create_time" label="宝石收益数">
        </el-table-column>
        <el-table-column prop="create_time" label="结算金额"> </el-table-column>
        <el-table-column prop="create_time" label="账单明细">
          <template slot-scope="scope">
            <el-button
              type="primary"
              plain
              size="small"
              @click="details(scope.row)"
              >查看明细</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="账单进度">
          <template slot-scope="scope">
            <el-button
              type="primary"
              plain
              size="small"
              @click="timeline(scope.row)"
              >时间线</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="操作"> </el-table-column>
      </el-table>
      <el-button style="margin-top: 20px">导出表格</el-button>
      <pagination
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-card>
    <el-dialog title="账单明细" :visible.sync="dialogVisible" width="50%">
      <el-descriptions :column="3" border>
        <el-descriptions-item :span="3" label="时间">
          2012-02-05~2012-03-05
        </el-descriptions-item>
        <el-descriptions-item label="宝石收益总数">
          20000
        </el-descriptions-item>
        <el-descriptions-item label="宝石支出总数"> 0 </el-descriptions-item>
        <el-descriptions-item label="宝石实际收益总数">
          20000
        </el-descriptions-item>
      </el-descriptions>
      <el-table
        :data="tableData1"
        style="width: 100%; margin-top: 10px"
        :header-cell-style="{ background: '#f5f7fa' }"
      >
        <el-table-column prop="create_time" label="时间"> </el-table-column>
        <el-table-column prop="create_time" label="主播ID"> </el-table-column>
        <el-table-column prop="create_time" label="主播昵称"> </el-table-column>
        <el-table-column prop="create_time" label="来源"> </el-table-column>
        <el-table-column prop="create_time" label="宝石收益数量变更">
        </el-table-column>
      </el-table>
      <pagination
        :total="total1"
        :page.sync="page1"
        :limit.sync="pageSize1"
        @pagination="getList1"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
        <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
      </span>
    </el-dialog>
    <el-dialog title="时间线" :visible.sync="dialogVisible1" width="30%">
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :timestamp="activity.timestamp"
        >
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">关 闭</el-button>
        <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页

export default {
  components: { Pagination },

  data() {
    return {
      id: "",
      name: "",
      type: "",
      loading: false,
      tableData: [{}],
      total: 0,
      page: 1,
      pageSize: 10,
      targetArr: [],
      dialogVisible: false,
      tableData1: [],
      total1: 0,
      page1: 1,
      pageSize1: 10,
      dialogVisible1: false,
      activities: [
        {
          content: "活动按期开始",
          timestamp: "系统 提交于 2018-04-15",
        },
        {
          content: "通过审核",
          timestamp: "财务 提交于 2018-04-13",
        },
        {
          content: "创建成功",
          timestamp: "系统 提交于 2018-04-11",
        },
      ],
    };
  },
  methods: {
    search() {},
    getList() {},
    getList1() {},
    handleSelectionChange(arr) {
      this.targetArr = arr;
    },
    details(obj) {
      this.dialogVisible = true;
    },
    timeline(obj) {
      this.dialogVisible1 = true;
    },
  },
};
</script>

<style lang="less" scoped>
.UnionSettlement {
  padding: 20px;
  .searchBox {
    display: flex;
    align-items: center;
    margin: 0 0 20px 0;
    .margin {
      margin: 0 10px;
    }
    .txt {
      display: inline-block;
      height: 40px;
      background-color: #f5f7fa;
      line-height: 40px;
      padding-left: 10px;
      color: #9d9399;
      border-radius: 4px 0 0 4px;
      border: 1px solid #dcdfe6;
      border-right: none;
      padding-right: 10px;
    }
    /deep/ .el-input__inner {
      border-radius: 0 4px 4px 0 !important;
    }
    .el-input {
      width: 180px;
    }
  }
}
</style>